/**
 * @Title: loading-view.js
 * @Description: loadingView
 * @author: LoveCrossZhu
 * @date: 2020/8/2 11:36 PM
 * @version V1.0
 */
import React from "react";
import {ActivityIndicator, Dimensions, StyleSheet, Text, View} from "react-native";
import {scaleSizeH, scaleSizeW, setSpText} from "@/util/screen";
const {width, height} = Dimensions.get("screen");
export default class LoadingView extends React.Component {
    constructor(props) {
        super(props);
        this.minShowingTime = 200;
        this.state = {
            // fadeAnim: new Animated.Value(0),
            isLoading: false,
            setIsLoading: (isLoading) => {
                if (isLoading !== this.state.isLoading) {
                    let curTimeLong = new Date().getTime();
                    if (isLoading) {
                        this.startTime = curTimeLong;
                        this.setState({
                            isLoading
                        });
                    } else {
                        let hasShowingTimeLong = curTimeLong - this.startTime;
                        if (hasShowingTimeLong < this.minShowingTime) {
                            setTimeout(() => {
                                this.setState({
                                    isLoading
                                });
                            }, this.minShowingTime - hasShowingTimeLong);

                        } else {
                            this.setState({
                                isLoading
                            });
                        }
                    }

                }
            },
        };
    }

    showLoading = () => {
        this.state.setIsLoading(true);
    };
    dismissLoading = () => {
        this.state.setIsLoading(false);
    };

    _doJump = () => {
        // this.state.fadeAnim.setValue(0);
        // this.animate = Animated.timing(
        //     this.state.fadeAnim,
        //     {
        //         toValue: 1,
        //         duration: 2000,
        //     }
        // ).start(this._doJump);
    };

    UNSAFE_componentWillMount() {
        this._doJump();
    }

    UNSAFE_componentWillUnmount() {
        if (this.animate) {
            this.animate.stop();
        }
    }

    render() {
        if (!this.state.isLoading) {
            return null;
        }
        return (
            <View style={styles.containerStyle}>
                <View style={[styles.loading]}>
                    {/*<Animated.Image source={icon.logo}*/}
                    {/*style={[styles.logoStyle,*/}
                    {/*{*/}
                    {/*transform: [*/}
                    {/*{*/}
                    {/*rotateY: this.state.fadeAnim.interpolate({*/}
                    {/*inputRange: [0, 1],*/}
                    {/*outputRange: ['0deg', '360deg']*/}
                    {/*})*/}
                    {/*}]*/}
                    {/*}]}/>*/}
                    <ActivityIndicator color="#e1e1e1" size={"large"}/>
                    {/*<Text style={styles.loadingTitle}>loading...</Text>*/}
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    containerStyle: {
        width: width,
        height: height,
        position: 'absolute',
        top: 0,
        left: 0,
        // backgroundColor: 'rgba(0,0,0,0)',
        flex: 1,
    },
    loading: {
        // backgroundColor: '#10101099',
        height: scaleSizeH(200),
        width: scaleSizeW(200),
        borderRadius: scaleSizeW(8),
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        top: (height - scaleSizeH(200)) / 2,
        left: (width - scaleSizeH(200)) / 2,
    },

    logoStyle: {
        width: scaleSizeW(63),
        height: scaleSizeH(75),
        resizeMode: 'contain',
    },

    loadingTitle: {
        marginTop: scaleSizeH(20),
        fontSize: setSpText(28),
        color: '#3478F6'
    }
});
